<template>
    <Row style="background:#eee;padding:10px" :gutter="16" align="middle">
        <Col span="4" v-for="item in indexList">
            <Card style="width:255px;height: 306px">
                <div style="text-align:center">
                    <img style="width: 235px;height: 235px" :src="item.imgUrl"/>
                    <p>{{item.productName}}</p>
                    <h4>{{item.price}}</h4>
                </div>
            </Card>
        </Col>
    </Row>
</template>

<script>
    export default {
        name: "IndexContent",
        data() {
            return {
                indexList: [
                    {
                        imgUrl: 'https://img30.360buyimg.com/jdcms/s300x300_jfs/t1/103471/38/16141/166951/5e781b42E10c367b7/097037ad16b2883c.jpg.webp',
                        productName: '【秒杀直降】中派 床 北欧床实木布艺卧室双人床',
                        price: '￥220'
                    },
                    {
                        imgUrl: 'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/39632/15/4452/165440/5cc931c3E7c9f839d/b30e0aaf7fdcda32.jpg.webp',
                        productName: '手包男真皮新款潮大容量手抓包韩版时尚手拿钱包男士手包牛皮',
                        price: '￥278'
                    },
                    {
                        imgUrl: 'https://img11.360buyimg.com/jdcms/s300x300_jfs/t1/88794/27/16352/174383/5e7a3a76E8d64c13d/8e558ed6e3c7e109.jpg.webp',
                        productName: '【专柜正品】香奈儿CHANEL口红女士炫亮魅力唇膏黑管丝绒58豆沙色情人节限量116红色哑光套装礼盒 ',
                        price: '￥238'
                    },
                    {
                        imgUrl: 'https://img10.360buyimg.com/jdcms/s300x300_jfs/t1/33142/2/14891/131731/5d146851E4213c612/86ad1887bf871792.jpg.webp',
                        productName: '2020新款PU商务旅行大容量手提斜挎单肩包 PU皮质包包',
                        price: '￥149'
                    },
                    {
                        imgUrl: 'https://img20.360buyimg.com/jdcms/s300x300_jfs/t1/90376/12/13189/266881/5e549803E0a3c4dbe/35b999a64631123c.jpg.webp',
                        productName: '小寻 儿童电话手表 T2 12天待机/智能防水/安全定位 学生儿童聊天学习腕机手环',
                        price: '￥299'
                    },
                    {
                        imgUrl: 'https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/38949/20/489/155636/5cb98d5eEbfca2664/3aaee9134bb826f2.jpg.webp',
                        productName: '汽车用品 汽车头枕靠腰 车用靠垫颈枕记忆棉头枕腰靠套装',
                        price: '￥239'
                    },
                    {
                        imgUrl: 'https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/79901/22/2753/99652/5d1093c7E595c806d/e5b33a3ef4a2ab2a.jpg.webp',
                        productName: '魅声 T8-2 手机声卡K歌快手主播直播电容麦克风喊麦唱歌录音设备',
                        price: '￥668'
                    },
                    {
                        imgUrl: 'https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/36766/32/11263/176449/5d13301dE51d3264a/65d6d83c7ccc65d9.jpg.webp',
                        productName: '2020新款韩版商务公文包男士 单肩斜跨包横版手提电脑包',
                        price: '￥189'
                    },
                    {
                        imgUrl: 'https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/36766/32/11263/176449/5d13301dE51d3264a/65d6d83c7ccc65d9.jpg.webp',
                        productName: '2020新款韩版商务公文包男士 单肩斜跨包横版手提电脑包',
                        price: '￥189'
                    },
                    {
                        imgUrl: 'https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/36766/32/11263/176449/5d13301dE51d3264a/65d6d83c7ccc65d9.jpg.webp',
                        productName: '2020新款韩版商务公文包男士 单肩斜跨包横版手提电脑包',
                        price: '￥189'
                    },
                ]

            }
        }
    }
</script>

<style scoped>

</style>
